<template>
  <div>
    <!-- 规律班次定义 -->
    <Dialog
      ref="regularShift"
      dialogCls="mydlgg"
      headerCls="mydlgg-head"
      footerCls="mydlgg-foot"
      :dialogStyle="{ width: '1100px' }"
      :modal="true"
      borderType="thin"
      @close="close"
    >
      <div slot="header">
        <span class="headerIcon newlyAdded"></span>
        <span class="titleStyle">规律班次定义</span>
      </div>

      <div class="insidePadding" style="height:600px">
        <div class="drop-containers" style="height:100%">
          <div class="grid-wrapper" style="height:100%">
            <Layout class="fullLayout" style="padding-left:250px">
              <!-- 左侧 -->
              <LayoutPanel
                region="west"
                class="leftLayout"
                style="width: 250px;"
              >
                <!-- 左侧表格 -->
                <div class="contentLeft">
                  <div class="toolsLeft">
                    <!-- 功能按钮组 高度30px-->
                    <div class="buttonbg">
                      <a class="bd_bgi">
                        <span class="add"></span>
                        <span class="text">新增</span>
                      </a>
                      <a class="bd_bgi">
                        <span class="modify"></span>
                        <span class="text">修改</span>
                      </a>
                      <a class="bd_bgi">
                        <span class="delete"></span>
                        <span class="text">删除</span>
                      </a>
                    </div>
                  </div>

                  <!-- 左侧表格 -->
                  <div class="tableContentL grid-wrapper">
                    <!-- AgGridVue   -->
                    <ag-grid-vue
                      id="myGrid"
                      style="width: 100%; height: 100%;text-align: center;"
                      class="ag-theme-balham"
                      :gridOptions="gridOptions"
                      :columnDefs="columnDefs"
                      rowSelection="multiple"
                      :rowDeselection="true"
                      @rowClicked="rowClickedd"
                      @grid-ready="onGridReady"
                      :rowData="rowData"
                      :defaultColDef="defaultColDef"
                      :localeText="localeText"
                      :rowDragManaged="true"
                      :animateRows="true"
                      @onRowDragEnd="onRowDragEnd"
                    ></ag-grid-vue>
                  </div>
                </div>
              </LayoutPanel>

              <!-- 右侧 -->
              <LayoutPanel region="center" class="LayoutPanelRight">
                <div class="toolsRight">
                  <!-- 功能按钮组 -->
                  <div class="buttonbg">
                    <span class="splitLine" style="margin-left: 0;"></span>
                    <a class="bd_bgi">
                      <span class="save"></span>
                      <span class="text">保存</span>
                    </a>
                    <a class="bd_bgi">
                      <span class="cancel"></span>
                      <span class="text">取消</span>
                    </a>
                  </div>
                  <!-- 条件 -->
                  <div
                    class="conditions"
                    style="height:33px;border-right:1px solid #BDC3C7;padding-top: 0;"
                  >
                    <div style="margin-right: 10px;">
                      <Label>规律名称</Label>
                      <TextBox
                        style="width:10em"
                      ></TextBox>
                    </div>
                  </div>
                </div>
                <!-- 表格容器 -->
                <div class="tableContentR">
                  <div class="drop-col" style="height:100%;overflow: auto">
                    <table
                      border="0"
                      cellpadding="0"
                      cellspacing="0"
                      class="tableBox"
                    >
                      <tr>
                        <th style="width:50px">周</th>
                        <th>周一</th>
                        <th>周二</th>
                        <th>周三</th>
                        <th>周四</th>
                        <th>周五</th>
                        <th>周六</th>
                        <th>周日</th>
                      </tr>
                      <tr>
                        <td class="disabled"></td>
                        <td class="hover"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </table>

                  </div>
                </div>
              </LayoutPanel>
            </Layout>
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
// 获取规律班次列表接口
// import overTime from "@/api/overTime/overTime";
// 请求班次下的排班信息接口
// import user from "@/api/user";
import { AgGridVue } from "ag-grid-vue";
import language_ag from "../config/localization_ag"; //表格插件汉化

export default {
  components: {
    AgGridVue,
  },
  name: "",
  data() {
    return {
      // 下拉框样式
      panelStyle: {
        height: "auto",
        maxHeight: "140px",
        borderWidth: "1px",
        borderColor: "#ccc",
        borderStyle: "solid",
      },
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      defaultColDef: null, //配置信息
      columnDefs: null, //左侧表格表头
      rowData: [], //左侧表格数据
      selectedRowDataUp: {}, //左侧表格行数据
      localeText: language_ag, // ag-grid汉化

      columnDefsRight: null, //右侧表格表头
      rowDataRight: [], //右侧表格数据
    };
  },
  beforeMount() {
    this.gridOptions = {};
    this.defaultColDef = {
      //默认渲染配置
      editable: false, //为true全部表格可编辑
      resizable: false, //可否拖动列
      sortable: false, //可否排序
      filter: false, //是否可过滤
      colResizeDefault: "shift", //列移位
      //单元格样式
      cellStyle: { "border-right": "1px solid #d9dcde" },
      flex: 1,
    };
    // this.columnDefs = [
    //   {
    //     field: "id",
    //     rowDrag: true,
    //     width: 150,
    //   },
    //   { field: "value1", width: 50 },
    //   { field: "value2", width: 50 },
    // ];
    this.columnDefs = [
      {
        headerName: "规律班次列表",
        field: "information",
        children: [
          {
            headerName: "名称",
            field: "bcName",
            width: 120,
            minWidth: 120,
            rowDrag:true,   //行拖动
          },
          {
            headerName: "周期数",
            field: "cycle",
            width: 60,
            minWidth: 60
          },
          {
            headerName: "单位",
            field: "unit",
            width: 60,
            minWidth: 60
          }

        ]
      }
    ];

    this.columnDefsRight = [
      {
        headerName: "周",
        field: "zhou",
      },
      {
        headerName: "周一",
        field: "zhouyi",
      },
      {
        headerName: "周二",
        field: "zhouer",
      },{
        headerName: "周三",
        field: "zhousan",
      },
      {
        headerName: "周四",
        field: "zhousi",
      },
      {
        headerName: "周五",
        field: "zhouwu",
      },
      {
        headerName: "周六",
        field: "zhouliu",
      },
      {
        headerName: "周日",
        field: "zhouri",
      },
    ];

    // this.rowData = [
    //   {
    //     bcName: "一周五天半",   //班次名称
    //     bcId: 76878,  //班次id
    //     cycle: 1,  //周期数
    //     unit: "周"   //单位
    //   },
    //   {
    //     bcName: "测试",   //班次名称
    //     bcId: 76878,  //班次id
    //     cycle: 10,  //周期数
    //     unit: "日"   //单位
    //   }
    // ];
    this.rowData = createRowData();
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    close() {
      this.$refs.regularShift.close();
    },
    open() {
      this.$refs.regularShift.open();
    },
    onGridReady(params) {
      addDropZones(params);
      params.api.setSuppressMoveWhenRowDragging(true);
      // 调整表格列宽大小自适应
      // this.gridApi.sizeColumnsToFit();
    },
    // 左侧表格点击行事件
    rowClickedd(params) {
      let _this = this;
      _this.selectedRowDataUp = {};
      _this.selectedRowDataUp = params.data;
      console.log(_this.selectedRowDataUp);
    },
    onRowDragEnd(e) {
      console.log("onRowDragEnd", e);
    },
  },
};
// 初始化数据
var rowIdSequence = 100;

window.createRowData = function createRowData() {
  var data = [];
  for (let index = 0; index < 8; index++) {
    var newDataItem = {
      bcName: "名称" + index,
      cycle: index%2==0?1:2,
      unit: index%2==0?"日":"周",
      bcId: "11" + index
    };
    data.push(newDataItem);
  }
  return data;
};
// 新建元素并添加类名，添加内容
window.createTile = function createTile(data) {
  var el = document.createElement("div");
  el.classList.add("tile");
  el.innerHTML = '<div style="cursor: default;" ' + "title=" +'"' + data.bcName + '"'+ "id=" +'"'+ data.bcId +'"'+ '  >' + data.bcName + "</div>";
  return el;
};

// 拖动完成把新建元素插入到目标内
window.addDropZones = function addDropZones(params) {
  $("td").mouseenter(function(e) {
    // console.log(e);  //鼠标当前移入的对象，此对象包含鼠标的坐标
    var el = e.target;  //得到目标元素
    if (
      el.tagName == "TD" &&
      el.className != "disabled" &&
      el.className != "selected"
    ) {
      $("td").removeClass("hover"); //先把所有同标签的类名全部移除
      $("td").css("background-color", "");//先把所有同标签的样式背景色全部移除
      el.className = "hover";//给目标元素添加类名
      el.style.backgroundColor = "#f9d79a";//给目标元素添加样式
    }
    var tileContainer = document.querySelector(".drop-col table tr .hover");  //获取到拥有刚刚添加了类名的目标元素
    console.log(tileContainer);

    var dropZone = {
      getContainer: function() {
        return tileContainer;
      },
      onDragStop: function(params) {
        var tile = createTile(params.node.data);
        tileContainer.innerHTML = "";
        // params.api.removeRowDropZone(dropZone);
        tileContainer.appendChild(tile);
      },
    };

    params.api.addRowDropZone(dropZone);
  });
};
</script>

<style scoped>
.updateScheduleByDateContent {
  display: flex;
  flex-direction: column;
}
.LayoutPanelRight::after {
  background-image: none;
  border-right: 0;
  width: 0px;
}
.tile{
  cursor: default;
}

/* ag-grid表格居中显示 */
  .ag-theme-balham .ag-cell-value { text-align: center; }
  .ag-theme-balham .ag-cell-wrapper {
    justify-content: center;
  }
</style>
